<template>
	<view class="page-root" :style="'height:'+screenHeight+'px;'">
		<view style="width: 100%;height: 40rpx;" :style="'height:'+barHeight+'px;'"></view>
		<!-- 导航栏  isback返回按钮，shownav是否显示导航栏-->
		<navigation id="navign" :isback="isback" :isShowBg="Boolean(imgbackdrop)" :isCrowd="isCrowd" v-if="shownav"
			:rightBtn="rightBtn" :navtitle="navtitle" @rightClick="rightClick" :isSelect="isSelect">
			<!-- 自定义导航栏插槽 -->
			<!-- <view slot='nav' style="width: 100%;"> -->
			<!-- 导航栏标题 -->
			<!-- <span style="color: #fff;" v-if="navtitle != ''">{{ navtitle }}</span> -->
			<!-- </view> -->
		</navigation>

		<view class="page-content" :style="{background:boxBackground}">
			<slot></slot>
		</view>

		<tabbox :base-tab="baseTab" v-if="istabbox" />
	</view>
</template>

<script>
	// 导航栏组件
	import navigation from "./navigation.vue";
	import tabbox from "./tabbox.vue";

	export default {
		components: {
			navigation, // 导航栏组件
			tabbox
		},
		props: {
			// 是否显示导航栏，默认不显示
			shownav: {
				type: [Boolean],
				default: false
			},
			// 是否显示返回按钮，默认不显示
			isback: {
				type: [Boolean],
				default: false
			},
			// 导航栏标题
			navtitle: {
				type: [String],
				default: ''
			},
			rightBtn: {
				type: [String],
				default: ''
			},
			isSelect: {
				type: [Boolean],
				default: false
			},
			// 页面背景图片地址(可选参数)
			imgbackdrop: {
				type: [String],
				default: ''
			},
			// 页面背景图片地址(可选参数)
			isCrowd: {
				type: [Boolean],
				default: false
			},
			// 是否显示tab切换栏
			istabbox: {
				type: [Boolean],
				default: false
			},
			boxBackground: {
				type: [String],
				default: '#d9d6d6'
				// default: '#E2E2E2'
			},
			baseTab: {
				type: Number,
				default: 0
			}
		},

		data() {
			return {
				screenHeight: getApp().globalData.screenHeight,
				barHeight: '10'
			}
		},
		created() {
			let globalData = getApp().globalData
			console.log(globalData)
			console.log(this.screenHeight)
			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			console.log(this.barHeight, "barHeight=================");
		},
		computed: {
			contentHeight() {
				let {
					istabbox,
					shownav
				} = this
				return this.screenHeight - (istabbox ? 80 : 0) - (shownav ? 44 : 0)
			}
		},
		methods: {
			rightClick() {
				this.$emit("rightClick", '')
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-root {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: url('/static/img/login-bg.png');
		background-size: 100% 100%;

		.nav {
			color: #fff;
		}

		.page-content {
			width: 100%;
			overflow: hidden;
			padding: 0;
			flex: 1;
		}
	}
</style>
